<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<div class="nav-li">
						<el-select
							size="mini"
							class="el-select"
							filterable
							placeholder="渠道筛选"
							v-model="sdkType"
							style="margin-right: 1em;width:100px;"
							@change="val => crud.refresh({ relation: val, page: 1 })"
						>
							<el-option value="" label="全部"></el-option>
							<el-option label="翼支付" value="yzf"></el-option>
							<el-option label="嗨返" value="hf"></el-option>
							<el-option label="K米" value="km"></el-option>
							<el-option label="网页" value="h5"></el-option>
							<el-option label="微信" value="wx"></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #slot-tabbat>
				<el-button size="mini" @click="updataTabbar">底部导航栏配置</el-button>
				<el-button size="mini" @click="putWayGoods">自动商品规则配置 </el-button>
			</template>
			<!-- <template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template> -->
			<template #slot-active="{scope}">
				<el-button type="text" @click="changeActive(scope.row)">活动修改</el-button>
			</template>
			<template #table-column-subsidiesType="{scope}">
				<el-tag v-if="scope.row.subsidiesType == 1">现金补贴</el-tag>
				<el-tag v-if="scope.row.subsidiesType == 2" type="success">刮刮卡补贴</el-tag>
			</template>
			<template #table-column-newPersonPageType="{scope}">
				<el-tag v-if="scope.row.newPersonPageType == 1">中奖名单页面</el-tag>
				<el-tag v-if="scope.row.newPersonPageType == 2" type="success">老用户弹窗</el-tag>
			</template>
			<template #table-column-shareType="{scope}">
				<el-tag v-if="scope.row.shareType == 1">保存图片分享</el-tag>
				<el-tag v-if="scope.row.shareType == 2" type="success">微信分享</el-tag>
				<el-tag v-if="scope.row.shareType == 3" type="success">APP分享</el-tag>
			</template>

			<template #table-column-shareConfig="{scope}">
				<el-tooltip
					class="item"
					effect="dark"
					content="今日首次分享随机得X1元(配置开关）；今日非首次分享随机得X2元."
					placement="top-start"
					v-if="scope.row.shareConfig == 1"
				>
					<el-tag>今日首次分享随机得X1元(配置开关）；今日非首次分享随机得X2元.</el-tag>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="dark"
					content="每次分享都随机得X3元"
					placement="top-start"
					v-if="scope.row.shareConfig == 2"
				>
					<el-tag type="success">每次分享都随机得X3元</el-tag>
				</el-tooltip>
			</template>
			<template #table-column-shareAmountConfig="{scope}">
				<el-tag v-if="scope.row.shareAmountConfig == 1">固定值</el-tag>
				<el-tag v-if="scope.row.shareAmountConfig == 2" type="success">随机值</el-tag>
			</template>
			<template #table-column-app="{scope}">
				{{ filterplatForm(scope.row.app) }}
			</template>
			<template #table-column-order-data="{scope}">
				<div>
					<div v-if="scope.row.shareConfig == 1 && scope.row.shareAmountConfig == 1">
						首次分享固定金额:{{ scope.row.firstShareFixedMinAmount }}
					</div>
					<div v-if="scope.row.shareConfig == 1 && scope.row.shareAmountConfig == 1">
						非首次分享固定金额:{{ scope.row.nonFirstShareFixedMinAmount }}
					</div>
					<div v-if="scope.row.shareConfig == 1 && scope.row.shareAmountConfig == 2">
						首次分享金额: {{ scope.row.firstShareRandomMinAmount }} -
						{{ scope.row.firstShareRandomMaxAmount }}
					</div>
					<div v-if="scope.row.shareConfig == 1 && scope.row.shareAmountConfig == 2">
						非首次分享金额: {{ scope.row.nonFirstSharRandomMinAmount }} -
						{{ scope.row.nonFirstShareRandomMaxAmount }}
					</div>
					<div v-if="scope.row.shareConfig == 2 && scope.row.shareAmountConfig == 1">
						每次分享都得的固定金额:{{ scope.row.shareRandomAmount }}
					</div>
					<div v-if="scope.row.shareConfig == 2 && scope.row.shareAmountConfig == 2">
						每次分享随机金额: {{ scope.row.shareMinRandomAmout }} -
						{{ scope.row.shareMaxRandomAmount }}
					</div>
				</div>
			</template>

			<template #table-column-virtualData="{scope}">
				<span v-if="scope.row.virtualData == 1">是</span>
				<span v-else>否</span>
			</template>

			<template #table-column-isDefault="{scope}">
				<span v-if="scope.row.isDefault == 1">是</span>
				<span v-else>否</span>
			</template>

			<template #table-column-orderConfig="{scope}">
				<span v-if="scope.row.orderConfig == 'open'">跳转平台</span>
				<span v-if="scope.row.orderConfig == 'copy'">复制淘口令</span>
				<span v-if="scope.row.orderConfig == 'copy-close'">复制淘口令并关闭窗口</span>
			</template>

			<template #table-column-sdkType="{scope}">
				<span v-if="scope.row.sdkType == 'yzf'">翼支付</span>
				<span v-else-if="scope.row.sdkType == 'km'">K米</span>
				<span v-else-if="scope.row.sdkType == 'h5'">网页</span>
				<span v-else-if="scope.row.sdkType == 'wx'">微信</span>
				<span v-else-if="scope.row.sdkType == 'hf'">嗨返</span>
			</template>
			<template #table-column-relation="{scope}">
				<span v-if="scope.row.relation == 'yzf'">翼支付</span>
				<span v-else-if="scope.row.relation == 'km'">K米</span>
				<span v-else-if="scope.row.relation == 'h5'">网页</span>
				<span v-else-if="scope.row.relation == 'wx'">微信</span>
				<span v-else-if="scope.row.relation == 'hf'">嗨返</span>
			</template>

			<template #table-column-backButtonShow="{scope}">
				<span>{{ scope.row.backButtonShow || '不显示' }}</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
		<cl-form ref="updata-avtive"></cl-form>
		<el-dialog title="编辑" :visible.sync="dialogVisible">
			<div v-loading="tabLoading">
				<el-button size="mini" @click="addVad">添加</el-button>
				<div class="tabbar-box">
					<div class="tabbar-li" v-for="(item, index) in tabbar" :key="index">
						<el-form :model="item" :ref="`ruleForm${index}`">
							<el-form-item
								label="名称"
								prop="name"
								:rules="{
									required: true,
									message: '请输入名称',
									trigger: 'blur'
								}"
							>
								<el-input v-model="item.name" maxlength="4" size="mini"></el-input>
							</el-form-item>
							<el-form-item
								label="跳转链接"
								prop="link"
								:rules="{
									required: true,
									message: '跳转链接不能为空'
								}"
							>
								<el-input v-model="item.link" size="mini"></el-input>
							</el-form-item>
							<el-row>
								<el-col :span="12">
									<el-form-item
										label="图标(未选中)"
										prop="unCheckIconUrl"
										:rules="{
											required: true,
											message: '图标不能为空'
										}"
									>
										<cl-upload v-model="item.unCheckIconUrl"></cl-upload>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item
										label="图标(选中)"
										prop="checkIconUrl"
										:rules="{
											required: true,
											message: '图标不能为空'
										}"
									>
										<cl-upload v-model="item.checkIconUrl"></cl-upload>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="排序" prop="level">
								<el-input-number
									v-model="item.level"
									:min="1"
									size="mini"
								></el-input-number>
								<span style="color:#999999;margin-left:10px">
									序号越大，排序越靠前
								</span>
							</el-form-item>
							<el-form-item label="状态" prop="status">
								<el-radio-group v-model="item.status">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="2">禁用</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item>
								<el-button size="mini" @click="delVad(index)">删除</el-button>
								<el-button size="mini" @click="subVad(index)">保存</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 自动上品 -->
		<el-dialog title="编辑" :visible.sync="putWayVisible">
			<div>
				<el-form :model="putWayForm" ref="putWay" label-width="200px">
					<el-form-item
						label="单个联盟号上品上限"
						prop="maxNum"
						:rules="{
							required: true,
							message: '请输入单个联盟号上品上限',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="4">
								<el-input v-model="putWayForm.maxNum" size="mini"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="最少在线上品数"
						prop="minOnline"
						:rules="{
							required: true,
							message: '请输入最少在线上品数',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="4">
								<el-input v-model="putWayForm.minOnline" size="mini"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="关键词屏蔽"
						prop="keyWords"
						:rules="{
							required: true,
							message: '请输入关键词',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="12">
								<el-input
									v-model="putWayForm.keyWords"
									type="textarea"
									autosize
								></el-input>
							</el-col>
						</el-row>
						<div>备注：请输入要屏蔽的的关键词并用英文逗号隔开</div>
					</el-form-item>
					<el-form-item
						label="佣金区间"
						prop="minCommissionRate"
						:rules="{
							required: true,
							message: '请输入佣金',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4">
								<el-input
									v-model="putWayForm.minCommissionRate"
									size="mini"
								></el-input>
							</el-col>
							<el-col :span="4"
								><el-input
									v-model="putWayForm.maxCommissionRate"
									size="mini"
								></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="券后价区间"
						prop="minEndPrice"
						:rules="{
							required: true,
							message: '请输入券后价',
							trigger: 'blur'
						}"
					>
						<el-row :gutter="20">
							<el-col :span="4"
								><el-input v-model="putWayForm.minEndPrice" size="mini"></el-input
							></el-col>
							<el-col :span="4"
								><el-input v-model="putWayForm.maxEndPrice" size="mini"></el-input
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item
						label="补贴金比例"
						prop="tljRate"
						:rules="{
							required: true,
							message: '请输入补贴金比例',
							trigger: 'blur'
						}"
					>
						<el-row>
							<el-col :span="4"
								><el-input-number
									:precision="4"
									:step="0.1"
									:min="0"
									:max="2"
									v-model="putWayForm.tljRate"
									size="mini"
								></el-input-number
							></el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="抓取类目数量">
						<el-row>
							<el-col :span="4">
								<el-button @click="openForm_CRUD">请选择类目</el-button>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="禁用分类">
						<el-row>
							<el-col :span="6">
								<el-select
									v-model="putWayForm.notClassify"
									multiple
									placeholder="请选择"
									size="mini"
								>
									<el-option
										v-for="item in classifyList"
										:key="item.value"
										:label="item.mainName"
										:value="item.floorId"
									>
									</el-option>
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item>
						<el-button size="mini" @click="savePutWay">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import subsidiesToday from './components/subsidiesToday';
import ActiveBox from './components/ActiveBox';
import numberSection from './components/numberSection';
import openCurd from './components/openFormBwbt2';
import _ from 'lodash';
import store from 'store';
export default {
	data() {
		return {
			defaultCfg: [],
			sdkType: '',
			crud: null,
			enterGoodsInfo: {},
			dayAllowance: [],
			value: '',
			options: [],
			pikerVal: moment().format('YYYY-MM-DD'),
			tabbar: [
				{
					name: '',
					link: '',
					unCheckIconUrl: '',
					checkIconUrl: '',
					status: '1',
					level: '1'
				}
			],
			dialogVisible: false,
			tabLoading: true,
			putWayVisible: false,
			putWayForm: {
				name: '',
				platform: '',
				maxNum: '',
				minOnline: '',
				keyWords: '',
				minCommissionRate: '', // 佣金
				maxCommissionRate: '',
				minEndPrice: '', // 券后价
				maxEndPrice: '',
				minTljMoney: '', //最低补贴金
				notAccont: '', // 禁用联盟
				notClassify: '', // 禁用分类
				tljRate: 0 // 补贴金比例
			},
			classifyList: []
		};
	},
	components: {
		// eslint-disable-next-line
		subsidiesToday,
		openCurd
	},
	mounted() {},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		setGoodsort(item) {
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '120px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'catName',
						label: '原始分类名',
						span: 24,
						value: item.catName,
						component: {
							name: 'el-item.catName',
							attrs: {
								size: 'mini'
							},
							render() {
								return <div>{item.catName}</div>;
							}
						}
					},
					{
						prop: 'cid',
						label: '平台分类名',
						span: 10,
						value: item.platformCid,
						component: {
							name: 'el-platformClassify',
							data() {
								return {
									options: self.options,
									value2: ''
								};
							},
							props: {
								value: [String, Number]
							},
							methods: {
								change(val) {
									this.$emit('input', val);
								}
							},
							mounted() {
								this.value2 = this.value;
							},
							render() {
								return (
									<el-select
										v-model={this.value2}
										onChange={this.change}
										placeholder="请选择">
										{this.options.map(item => {
											return (
												<el-option
													label={item.mainName}
													value={item.cid}></el-option>
											);
										})}
									</el-select>
								);
							}
						}
					},
					{
						prop: 'level',
						label: '分类排序：',
						value: item.level,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={0}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					}
				],
				on: {
					submit({ data, close }) {
						console.log(data);
						// self.$service.goodsMenagement.bwbtConfig
						// 	.update({
						// 		...data,
						// 		id: item.id
						// 	})
						// 	.then(() => {
						// 		self.$message({
						// 			message: '设置成功',
						// 			type: 'success'
						// 		});
						// 		self.crud.refresh();
						// 		close();
						// 		return;
						// 	})
						// 	.catch(err => {
						// 		self.$message.error(err);
						// 	});
					}
				}
			});
		},
		// 设置表单默认参数 this.defaultCfg = 默认参数对象

		setDefaultFrom() {
			// this.defaultCfg;       如果有更简单的写法……轻点打
			console.log(this.defaultCfg);
			if (!this.defaultCfg) {
				this.defaultCfg = {};
			}

			this.crud.setForm('subsidiesType', this.defaultCfg.subsidiesType); // 补贴形式
			this.crud.setForm('newPersonPageType', this.defaultCfg.newPersonPageType); // 新用户页面
			this.crud.setForm('shareType', this.defaultCfg.shareType); // 分享形式
			this.crud.setForm('subsidiesToday', this.defaultCfg.subsidiesToday); // 今日补贴金

			this.crud.setForm('shareConfig', this.defaultCfg.shareConfig); // 分享红包配置
			this.crud.setForm('shareAmountConfig', this.defaultCfg.shareAmountConfig); // 红包金额类型
			this.crud.setForm('firstShareFixedMinAmount', this.defaultCfg.firstShareFixedMinAmount); // 首次分享固定金额
			this.crud.setForm(
				'nonFirstShareFixedMinAmount',
				this.defaultCfg.nonFirstShareFixedMinAmount
			); // 非首次分享固定金额
			this.crud.setForm(
				'firstShareRandomMinAmount',
				this.defaultCfg.firstShareRandomMinAmount
			); // 首次分享金额最小值
			this.crud.setForm(
				'firstShareRandomMaxAmount',
				this.defaultCfg.firstShareRandomMaxAmount
			); // 首次分享金额最大值
			this.crud.setForm(
				'nonFirstSharRandomMinAmount',
				this.defaultCfg.nonFirstSharRandomMinAmount
			); // 非首次分享金额最小值
			this.crud.setForm(
				'nonFirstShareRandomMaxAmount',
				this.defaultCfg.nonFirstShareRandomMaxAmount
			); // 非首次分享金额最大值
			this.crud.setForm('shareRandomAmount', this.defaultCfg.shareRandomAmount); // 每次分享都得的固定金额
			this.crud.setForm('shareMinRandomAmout', this.defaultCfg.shareMinRandomAmout); // 每次分享随机金额最小值
			this.crud.setForm('shareMaxRandomAmount', this.defaultCfg.shareMaxRandomAmount); // 每次分享随机金额最大值

			this.crud.setForm('againNum', this.defaultCfg.againNum); // 再刮次数
			this.crud.setForm('shareIcon', this.defaultCfg.shareIcon); // 微信分享图标

			this.crud.setForm('shareFriendMainTemplate', this.defaultCfg.shareFriendMainTemplate); // 分享好友文案主标题
			this.crud.setForm(
				'shareFriendMainSubtitleTemplate',
				this.defaultCfg.shareFriendMainSubtitleTemplate
			); // 分享好友文案副标题
			this.crud.setForm(
				'shareFriendCircleTemplate',
				this.defaultCfg.shareFriendCircleTemplate
			); // 分享朋友圈文案

			this.crud.setForm('orderConfig', this.defaultCfg.orderConfig); // 抢购下单配置
			this.crud.setForm('virtualData', this.defaultCfg.virtualData); // 展示虚拟数据
			this.crud.setForm('shareLink', this.defaultCfg.shareLink); // 分享图片二维码链接
			this.crud.setForm('backButtonShow', this.defaultCfg.backButtonShow); // 按钮是否显示
			this.crud.setForm('isShare', this.defaultCfg.isShare); // 分享按钮是否显示

			this.crud.setForm('relation', this.defaultCfg.relation); // 渠道
			this.crud.setForm('sdkType', this.defaultCfg.sdkType); // SDK类型

			this.crud.setForm('tklTemplate', this.defaultCfg.tklTemplate); // 复制淘口令文案
			this.crud.setForm('openTemplate', this.defaultCfg.openTemplate); // 打开淘宝文本

			this.crud.setForm('isDefault', this.defaultCfg.isDefault); // 是否默认配置
			this.crud.setForm('activityKey', this.defaultCfg.activityKey); // 不知道是啥玩意
			this.crud.setForm('app', this.defaultCfg.app);
			this.changeConfig();
		},
		// 根据shareConfig 和 shareAmountConfig 的值来判断需要显示那些数据
		changeConfig() {
			let { shareConfig, shareAmountConfig } = this.crud.getForm();

			for (let key in this.crud.getForm()) {
				if (
					![
						'firstShareFixedMinAmount',
						'nonFirstShareFixedMinAmount',
						'nonFirstSharRandomAmount',
						'firstShareRandomAmount',
						'shareRandomAmount',
						'shareRandomAmout'
					].includes(key)
				) {
					continue;
				}
				if (
					shareConfig == 1 &&
					shareAmountConfig == 1 &&
					(key == 'firstShareFixedMinAmount' || key == 'nonFirstShareFixedMinAmount')
				) {
					this.crud.setData('upsert.items[prop:firstShareFixedMinAmount].hidden', false);
					this.crud.setData(
						'upsert.items[prop:nonFirstShareFixedMinAmount].hidden',
						false
					);
					continue;
				}
				if (
					shareConfig == 1 &&
					shareAmountConfig == 2 &&
					(key == 'nonFirstSharRandomAmount' || key == 'firstShareRandomAmount')
				) {
					this.crud.setData('upsert.items[prop:nonFirstSharRandomAmount].hidden', false);

					this.crud.setData('upsert.items[prop:firstShareRandomAmount].hidden', false);
					// this.crud.setData(
					// 	'upsert.items[prop:nonFirstSharRandomMinAmount].hidden',
					// 	false
					// );
					// this.crud.setData(
					// 	'upsert.items[prop:nonFirstShareRandomMaxAmount].hidden',
					// 	false
					// );
					continue;
				}

				if (shareConfig == 2 && shareAmountConfig == 1 && key == 'shareRandomAmount') {
					this.crud.setData('upsert.items[prop:shareRandomAmount].hidden', false);
					continue;
				}
				if (shareConfig == 2 && shareAmountConfig == 2 && key == 'shareRandomAmout') {
					this.crud.setData('upsert.items[prop:shareRandomAmout].hidden', false);
					continue;
				}
				this.crud.setData(`upsert.items[prop:${key}].hidden`, true);
			}
		},
		changeActive(val) {
			this.$refs['cl-form'].open({
				props: {
					title: '活动设置',
					'label-width': '120px',
					center: true,
					'custom-class': 'custom-class-dialog-mini',
					'destroy-on-close': true
				},
				items: [
					{
						prop: 'activity',
						props: { 'label-width': '0px' },
						value: val,
						component: ActiveBox
					}
				],
				on: {
					submit: ({ data, close }) => {
						let d = _.cloneDeep(data);
						d.activity.map(m => {
							m.amountList = m.amountList.map(e => e.value).join();
						});

						this.$service.goodsMenagement.bwbtConfig
							.update({
								...val,
								activity: JSON.stringify(d.activity)
							})
							.then(() => {
								this.$message({
									message: '修改成功',
									type: 'success'
								});
								this.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								this.$message.error(err);
							});
					}
				}
			});
		},
		onLoad({ ctx, app }) {
			let self = this;
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.bwbtConfig)
				.set('dict', {
					api: {
						page: 'page'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '渠道',
							prop: 'relation',
							align: 'center',
							width: 110
						},
						{
							label: 'SDK类型',
							prop: 'sdkType',
							align: 'center',
							width: 110
						},
						{
							label: '今日补贴金',
							prop: 'subsidiesToday',
							align: 'center',
							'min-width': 150
						},
						{
							label: '补贴形式',
							prop: 'subsidiesType',
							align: 'center',
							width: 116
						},
						{
							prop: 'shareType',
							label: '分享形式',
							align: 'center',
							width: 116
						},
						{
							label: '新用户页面',
							prop: 'newPersonPageType',
							align: 'center',
							width: 116
						},
						{
							label: '分享补贴金额',
							prop: 'order-data',
							align: 'center',
							'min-width': 250
						},
						{
							label: '今日可再刮次数',
							prop: 'againNum',
							align: 'center',
							'min-width': 150
						},
						{
							label: '回到主页按钮',
							prop: 'backButtonShow',
							align: 'center',
							width: 150
						},
						{
							label: '是否默认',
							prop: 'isDefault',
							align: 'center',
							width: 80
						},
						{
							label: '分享好友文案主标题',
							prop: 'shareFriendMainTemplate',
							align: 'center',
							width: 200,
							emptyText: '无'
						},
						{
							label: '分享好友文案副标题',
							prop: 'shareFriendMainSubtitleTemplate',
							align: 'center',
							width: 200,
							emptyText: '无'
						},
						{
							label: '分享朋友圈文案',
							prop: 'shareFriendCircleTemplate',
							align: 'center',
							width: 200,
							emptyText: '无'
						},
						{
							label: '红包文案',
							prop: 'popText',
							align: 'center',
							width: 200,
							emptyText: '无'
						},
						{
							label: '抢购下单配置',
							prop: 'orderConfig',
							align: 'center',
							width: 200
						},
						{
							label: '虚拟数据',
							prop: 'virtualData',
							align: 'center',
							width: 80
						},
						{
							label: '分享图片二维码链接',
							prop: 'shareLink',
							align: 'center'
						}
					],

					op: {
						visible: true,
						// layout: ['slot-setSort']
						layout: ['slot-active', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '180px',
						center: true,
						'custom-class': 'custom-class-dialog',
						width: '970px'
					},
					items: [
						{
							prop: 'subsidiesType',
							label: '补贴形式',
							span: 12,
							value: 2,
							component: {
								name: 'el-select',
								options: [
									{
										label: '现金补贴',
										value: 1
									},
									{
										label: '刮刮卡补贴',
										value: 2
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择补贴形式',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareType',
							label: '分享形式',
							span: 12,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label: '保存图片分享',
										value: 1
									},
									{
										label: '微信分享',
										value: 2
									},
									{
										label: 'APP分享',
										value: 3
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择分享形式',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'newPersonPageType',
							label: '新用户页面',
							span: 12,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label: '中奖名单页面',
										value: 1
									},
									{
										label: '老用户弹窗',
										value: 2
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择新用户页面形式',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'orderConfig',
							label: '抢购下单配置',
							span: 12,
							component: {
								name: 'el-select',
								options: [
									{
										label: '跳转平台',
										value: 'open'
									},
									{
										label: '复制淘口令',
										value: 'copy'
									},
									{
										label: '复制淘口令并关闭窗口',
										value: 'copy-close'
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择分享形式',
									trigger: 'blur'
								}
							]
						},
						{
							label: '展示虚拟数据',
							prop: 'virtualData',
							span: 12,
							value: 1,
							component: {
								name: 'el-radio-group',

								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							prop: 'sdkType',
							label: 'SDK类型',
							span: 12,
							component: {
								attrs: {
									placeholder: '请选择补贴形式'
								},
								name: 'el-select',
								options: [
									{
										label: '翼支付',
										value: 'yzf'
									},
									{
										label: '嗨返',
										value: 'hf'
									},
									{
										label: 'K米',
										value: 'km'
									},
									{
										label: '网页',
										value: 'h5'
									},
									{
										label: '微信',
										value: 'wx'
									},
									{
										label: '支付宝',
										value: 'zfb'
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择补贴形式',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareConfig',
							label: '分享红包配置',
							span: 12,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label:
											'今日首次分享随机得X1元(配置开关）；今日非首次分享随机得X2元',
										value: 1
									},
									{
										label: '每次分享都随机得X3元',
										value: 2
									}
								],
								on: {
									change() {
										// val
										self.changeConfig();
									}
								}
							},
							rules: [
								{
									required: true,
									message: '请选择分享红包配置',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareAmountConfig',
							label: '红包金额类型',
							span: 12,
							value: 2,
							component: {
								name: 'el-select',
								options: [
									{
										label: '固定值',
										value: 1
									},
									{
										label: '随机值',
										value: 2
									}
								],
								on: {
									change(val) {
										console.log(val);

										self.changeConfig();
									}
								}
							},
							rules: [
								{
									required: true,
									message: '请选择分享红包金额配置',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'firstShareFixedMinAmount',
							label: '首次分享固定金额',
							span: 12,
							hidden: true,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入首次分享固定金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'nonFirstShareFixedMinAmount',
							label: '非首次分享固定金额',
							span: 12,
							hidden: true,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入非首次分享固定金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'firstShareRandomAmount',
							label: '首次分享金额',
							hidden: true,
							span: 12,
							component: {
								name: 'firstShareRandomAmount',
								props: {
									value: [String, Number]
								},
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<numberSection
											value={this.value}
											onInput={this.input}></numberSection>
									);
								}
							},
							rules: [
								{
									required: true,
									message: '请输入首次分享金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'nonFirstSharRandomAmount',
							label: '非首次分享金额',
							hidden: true,
							span: 12,
							component: {
								name: 'nonFirstSharRandomAmount',
								props: {
									value: [String, Number]
								},
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<numberSection
											value={this.value}
											onInput={this.input}></numberSection>
									);
								}
							},
							rules: [
								{
									required: true,
									message: '请输入非首次分享金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareRandomAmount',
							label: '每次分享都得的固定金额',
							span: 12,
							hidden: true,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入每次分享都得的固定金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareRandomAmout',
							label: '每次分享随机金额',
							hidden: true,
							span: 12,
							component: {
								name: 'shareRandomAmout',
								props: {
									value: [String, Number]
								},
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								render() {
									return (
										<numberSection
											value={this.value}
											onInput={this.input}></numberSection>
									);
								}
							},
							rules: [
								{
									required: true,
									message: '请输入每次分享随机金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'againNum',
							label: '再刮次数',
							span: 12,
							value: 1,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1,
									max: 100
								}
							},
							rules: [
								{
									required: true,
									message: '请输入再刮次数',
									trigger: 'blur'
								}
							]
						},
						{
							label: '分享按钮是否显示',
							prop: 'isShare',
							value: 1,
							component: {
								name: 'el-radio-group',

								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '不显示',
										value: 0
									}
								]
							}
						},
						{
							label: '是否默认配置',
							prop: 'isDefault',
							value: 1,
							span: 12,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							prop: 'relation',
							label: '渠道',
							span: 12,
							component: {
								attrs: {
									placeholder: '请选择渠道'
								},
								name: 'el-select',
								options: [
									{
										label: '翼支付',
										value: 'yzf'
									},
									{
										label: '嗨返',
										value: 'hf'
									},
									{
										label: 'K米',
										value: 'km'
									},
									{
										label: '网页',
										value: 'h5'
									},
									{
										label: '微信',
										value: 'wx'
									},
									{
										label: '支付宝',
										value: 'zfb'
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择渠道',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'btnisshow',
							label: '回到主页按钮',
							span: 8,
							value: 0,
							component: {
								name: 'el-select',
								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '隐藏',
										value: 0
									}
								]
							},
							rules: [
								{
									validator: (rules, value, callback) => {
										if (value == 1) {
											app.setData(
												'upsert.items[prop:backButtonShow].hidden',
												false
											);
										} else {
											app.setData(
												'upsert.items[prop:backButtonShow].hidden',
												true
											);
										}
										callback();
									}
								}
							]
						},
						{
							prop: 'backButtonShow',
							label: '回到主页url地址',
							span: 16,
							hidden: true,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'subsidiesToday',
							label: '今日补贴金',
							component: {
								name: 'subsidiesToday-c',
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								props: {
									value: [String, Number]
								},
								render() {
									return (
										<subsidiesToday
											value={this.value}
											onInput={this.input}></subsidiesToday>
									);
								}
							},
							rules: [
								{
									required: true,
									message: '请选择渠道',
									trigger: 'blur'
								}
							]
						},
						{
							label: '主题累计已发金额（亿）',
							prop: 'totalGeSubsidiestAmount',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 10000,
									precision: 2
								}
							}
						},
						{
							label: '主题今日已发金额（万）',
							prop: 'todayGetSubsidiesAmount',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 10000,
									precision: 2
								}
							}
						},
						{
							label: '每日几点开抢',
							prop: 'startVieTime',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 24,
									precision: 0
								}
							}
						},
						{
							label: '倒计时时间（分钟）',
							prop: 'countDownTime',
							span: 12,
							value: 60,
							component: {
								name: 'el-input-number',
								props: {
									max: 10000,
									precision: 0
								},
								attrs: {
									placeholder: '小于0为当天23:59:59'
								}
							}
						},
						{
							prop: 'shareImageUrl',
							label: '分享图片（canvas）',
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'floorIds',
							label: '商品分类',
							value: [],
							component: {
								name: 'el-select',
								props: {
									multiple: true
								},
								options: []
							}
						},
						{
							label: '京东类目显示',
							prop: 'jdFloorShow',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							prop: 'shareIcon',
							label: '微信分享图标',
							span: 12,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'shareFriendMainTemplate',
							label: '分享好友文案主标题',
							span: 24,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'shareFriendMainSubtitleTemplate',
							label: '分享好友文案副标题',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								},
								row: 8
							}
						},
						{
							prop: 'shareFriendCircleTemplate',
							label: '分享朋友圈文案',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								},
								row: 8
							}
						},
						{
							prop: 'popText',
							label: '红包文案',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								},
								row: 8
							}
						},
						{
							prop: 'tklTemplate',
							label: '复制淘口令文案',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								},
								row: 8
							}
						},
						{
							prop: 'openTemplate',
							label: '打开淘宝文本',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea'
								},
								row: 8
							}
						},
						{
							prop: 'shareLink',
							label: '分享图片二维码链接',
							span: 24,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'marketBackgroundUrl',
							label: '营销模块橱窗背景',
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'marketTitle',
							label: '营销模块橱窗标题',
							span: 24,
							component: {
								name: 'el-input'
							}
						}
					],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-tabbat', 'query', 'flex1', 'slot-filter'], //, 'search-key'
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async (isopen, data) => {
					let classList = await this.$service.goodsMenagement.specialClassify.list({
						specialType: 100
					});

					app.setData(
						'upsert.items[prop:floorIds].component.options',
						classList.map(e => {
							return {
								label: e.mainName,
								value: e.floorId
							};
						})
					);
					// 新增打开表单
					if (!isopen) {
						app.setData('upsert.items[prop:btnisshow].value', 0);
						app.setData('upsert.items[prop:backButtonShow].hidden', true);
						this.setDefaultFrom(); // 设置表单默认参数
						this.changeConfig();
					} else {
						if (data.floorIds) {
							app.setForm(
								'floorIds',
								data.floorIds.split(',').map(e => {
									return Number(e);
								})
							);
						}

						if (app.getForm('backButtonShow') == '' || null) {
							app.setForm('btnisshow', 0);
						} else {
							app.setForm('btnisshow', 1);
						}
						setTimeout(() => {
							// this.changeConfig();
							app.setForm(
								'shareRandomAmout',
								data.shareMinRandomAmout + ',' + data.shareMaxRandomAmount
							);
							app.setForm(
								'nonFirstSharRandomAmount',
								data.nonFirstSharRandomMinAmount +
									',' +
									data.nonFirstShareRandomMaxAmount
							);
							app.setForm(
								'firstShareRandomAmount',
								data.firstShareRandomMinAmount +
									',' +
									data.firstShareRandomMaxAmount
							);
						}, 100);
						this.$nextTick(() => {
							this.changeConfig();
						});
					}
					// app.setData('upsert.items[prop:app].component.options', this.platformList);
				})
				.on('refresh', async (params, { next }) => {
					await next(params);
				})
				.on('submit', (isOpen, data, { next }) => {
					// console.log(data);
					// return false;
					let { shareConfig, shareAmountConfig } = data;
					if (shareConfig == 1 && shareAmountConfig == 2) {
						data.firstShareRandomMinAmount = data.firstShareRandomAmount.split(',')[0];
						data.firstShareRandomMaxAmount = data.firstShareRandomAmount.split(',')[1];
						data.nonFirstSharRandomMinAmount = data.nonFirstSharRandomAmount.split(
							','
						)[0];
						data.nonFirstShareRandomMaxAmount = data.nonFirstSharRandomAmount.split(
							','
						)[1];
					}
					if (shareConfig == 2 && shareAmountConfig == 2) {
						this.crud.setData('upsert.items[prop:shareRandomAmout].hidden', false);
						data.shareMinRandomAmout = data.shareRandomAmout.split(',')[0];
						data.shareMaxRandomAmount = data.shareRandomAmout.split(',')[1];
					}
					delete data.firstShareRandomAmount;
					delete data.nonFirstSharRandomAmount;
					delete data.shareRandomAmout;

					// 回到主页url判断
					var bbs = app.getForm('backButtonShow');
					var btnisshow;
					if (app.getForm('btnisshow') == 0) {
						bbs = '';
					}
					data.app = store.get('platForm');
					if (data.floorIds) {
						data.floorIds = data.floorIds.join();
					}

					// 活动
					next({
						...data,
						backButtonShow: bbs,
						btnisshow: btnisshow
					});
				})
				.done();
			this.$service.goodsMenagement.bwbtConfig.defaultConfig().then(res => {
				this.defaultCfg = res;
			});
			app.refresh({
				prop: 'createTime',
				order: 'desc',
				time: moment().format('YYYY-MM-DD')
			});
		},
		addVad() {
			if (this.tabbar.length < 4) {
				this.tabbar.push({
					name: '',
					link: '',
					unCheckIconUrl: '',
					checkIconUrl: '',
					status: 1,
					level: '1'
				});
			}
		},
		delVad(i) {
			this.$service.goodsMenagement.bwbtNav
				.delete({
					ids: this.tabbar[i].id
				})
				.then(() => {
					this.$message.success('删除成功');
					this.updataTabbar();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		subVad(i) {
			let t = `ruleForm${i}`;
			this.$refs[t][0].validate(valid => {
				if (valid) {
					console.log(this.tabbar[i]);
					if (this.tabbar[i].id) {
						this.$service.goodsMenagement.bwbtNav
							.update({
								...this.tabbar[i],
								type: 1
							})
							.then(() => {
								this.$message.success('添加成功');
							})
							.catch(err => {
								this.$message.error(err);
							});
					} else {
						this.$service.goodsMenagement.bwbtNav
							.add({
								...this.tabbar[i],
								type: 1
							})
							.then(() => {
								this.$message.success('添加成功');
							})
							.catch(err => {
								this.$message.error(err);
							});
					}
				}
			});
		},
		// 底部导航栏配置
		updataTabbar() {
			this.dialogVisible = true;
			this.$service.goodsMenagement.bwbtNav
				.list({
					type: 1
				})
				.then(res => {
					this.tabLoading = false;
					this.tabbar = res;
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		// 配置自动上品
		putWayGoods() {
			this.$service.goodsMenagement.bwbtConfig.bybt().then(res => {
				this.putWayForm = res.config;
				this.putWayForm.notClassify = this.putWayForm.notClassify.split(',').map(item => {
					return Number(item);
				});
				console.log(this.putWayForm);
				this.classifyList = res.classifyList;
				this.putWayVisible = true;
			});
		},
		openForm_CRUD() {
			this.$refs['cl-form'].open({
				props: {
					title: '查看分类',
					width: '800px',
					size: 'mini'
				},
				op: {
					confirmButtonText: '保存',
					cancelButtonText: '关闭',

					layout: ['cancel'] // 同crud下的layout
				},
				items: [
					{
						prop: '101',
						value: 101,
						component: openCurd
					}
				]
			});
		},
		savePutWay() {
			this.putWayForm.notClassify = this.putWayForm.notClassify.join(',');
			this.$service.goodsMenagement.bwbtConfig.updateYzfConfig(this.putWayForm).then(res => {
				this.$message.success('保存成功！');
				this.putWayVisible = false;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.el-form-item__content {
	.cl-upload {
		display: block;
	}
}
.tabbar-box {
	display: flex;
	flex-wrap: wrap;
}
.tabbar-li {
	width: 40%;
	margin: 0 20px;
}
</style>
